<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>临窗旋墨：文章详情</title>
    <th:block th:replace="headfoot/head::head_common"></th:block>
    <link rel="stylesheet" th:href="@{/lib/editor.md-master/css/editormd.css}"/>
    <link rel="stylesheet" th:href="@{/lib/jquery-ui-1.12.1/jquery-ui.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/content.css}"/>
    <link rel="stylesheet" th:href="@{/lib/editor.md-master/css/editormd.preview.css}"/>


</head>

<body>
<div class="container-fluid kj-form-container">
    <div class="row">
        <div class="col-md-12">
            <div class="articleContent shadow">
                <h3 class="title" th:text="${entity.title}">
                    tiltle
                </h3>
                <div class="property">
                    <span><small>文章来源</small>：<span
                            th:text="${entity.originated==1?'原创':entity.source}">原创</span></span>&nbsp;&nbsp;
                    <span><small>作者：</small><span th:text="${entity.author}"></span></span>&nbsp;&nbsp;
                    <span><small>发布时间：</small><span th:text="${#dates.format(entity.createTime, 'yyyy-MM-dd')}"></span></span>&nbsp;&nbsp;
                    <span><small>阅读：</small><span th:text="${entity.readNum}">100</span></span>&nbsp;&nbsp;
                    <span><small>标签：</small><span th:text="${entity.tagNames}"></span></span>
                </div>
                <div id="contentTxt" class=" markdown-body editormd-html-preview" th:utext="${entity.html}">
                </div>
            </div>

        </div>
    </div>

    <hr/>
</div>
<div class="panel panel-default md-toc">
    <div class="panel-heading">
        <h3 class="panel-title">
            <span>目录</span><a id="closeToc"><i class="glyphicon glyphicon-remove pull-right text-small"></i></a>
        </h3>
    </div>
    <div class="panel-body" id="toc" th:utext="${entity?.toc}">

    </div>
</div>
<div class="bottom-toolbar">
    <a class="btn btn-lg btn-link" data-toggle="tooltip"
       data-placement="top" title="目录">
        <i class="glyphicon glyphicon-th-list"></i>
    </a>
</div>


<th:block th:replace="headfoot/foot::form_ztree_foot"></th:block>
<script th:src="@{/lib/jquery-ui-1.12.1/jquery-ui.min.js}"></script>
<script th:src="@{/lib/editor.md-master/editormd.min.js}"></script>
<script>


    function toc() {
        let $toc = $(".md-toc");

        $toc.css("height", $toc.outerHeight()).css("width", $toc.outerWidth());
        $(".bottom-toolbar").find(".btn").tooltip({"placement": "top"}).on("click", function () {
            $($toc).toggle("slow");
        });
        $("#closeToc", $toc).on("click", function () {
            $($toc).toggle("fast");
        });
        $toc.draggable({});
    }

    toc();
</script>

</body>
</html>